import {
  DrawerForm,
  ModalForm,
  ProCard,
  ProForm,
  ProFormField,
  ProFormGroup,
  ProFormItemRender,
  ProFormList,
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from "@ant-design/pro-components";
import "./index.less";
import { Alert, Button, Card, ConfigProvider, Form, Space } from "antd";
import React from "react";
import {
  createDynamicApi,
  queryDataSource,
  saveDynamicApi,
} from "../../../api";
import JsonEditor from "./JsonEditor";
import DrawerTrigger from "../../../components/DrawerTrigger";
import SqlGenerate from "./SqlGenerate";
import SqlCustom from "./SqlCustom";
import { EditOutlined } from "@ant-design/icons";

const SaveApi = ({ payload, children }: any) => {
  let [form] = Form.useForm();
  return (
    <ModalForm
      modalProps={{
        maskClosable: false,
      }}
      width={600}
      title="接口创建"
      layout="horizontal"
      form={form}
      onFinish={async (values) => {
        const data = {
          ...values,
          resBody: values.resBody?JsonEditor.toJSON(values.resBody):{},
        };
        // if (values.sqls) {
        //   values.sqls = JSON.stringify(values.sqls)
        // }
        if (values.id) {
          await saveDynamicApi(data);
        } else {
          await createDynamicApi(data);
        }
        return true;
      }}
      onOpenChange={(open) => {
        if (open && payload) {
          form.setFieldsValue({
            ...payload,
            resBody: JsonEditor.toSchema(payload.resBody),
          });
        }
      }}
      trigger={<div>{children}</div>}
    >
      <ConfigProvider
        theme={{
          components: {
            Card: {
              // headerPaddingSM:10
            },
            Form: {
              // itemMarginBottom: 1,
              // verticalLabelMargin:10,
              // inlineItemMarginBottom:10,
            },
          },
        }}
      >
        <ProFormText hidden name="id" />
        {/*          
           <ProFormSelect
            options={[{label:'图库登录',value:'s'}]}
            width="md"
            name="authentication"
            label="认证"
          /> */}
        <ProFormField allowClear={false} width="md" name="path" label="路径" />
        <ProFormSelect
          allowClear={false}
          width="md"
          options={[
            { label: "POST", value: "POST" },
            { label: "GET", value: "GET" },
          ]}
          name="method"
          label="方法"
        />
        <ProFormSelect
          allowClear={false}
          width="md"
          options={[{ label: "SQL", value: "SQL" }]}
          name="type"
          label="类型"
        />
        <ProFormField label="SQL设置">
          <DrawerTrigger
            width={800}
            title="SQL设置"
            trigger={<Button  size="small"  icon={<EditOutlined/>}>设置</Button>}
          >
            <Alert
              showIcon
              type="info"
              style={{ marginBottom: 10 }}
              message={
                <div>$.body 请求对象 $.headers 请求头 $.query 查询对象</div>
              }
            />
            <ConfigProvider
              theme={{
                components: {
                  Form: {
                    // inlineItemMarginBottom:10
                    itemMarginBottom: 6,
                    verticalLabelMargin: 10,
                    inlineItemMarginBottom: 10,
                  },
                },
              }}
              componentSize="small"
            >
              <ProFormRadio.Group
                name="sqlType"
                options={[
                  { label: "自定义", value: "custom" },
                  { label: "生成", value: "generate" },
                ]}
              />
              <Form.Item
                noStyle
                shouldUpdate={(a, b) => a.sqlType != b.sqlType}
              >
                {({ getFieldValue }) => {
                  if (getFieldValue("sqlType") === "custom") {
                    return <SqlCustom />;
                  }
                  return <SqlGenerate />;
                }}
              </Form.Item>
            </ConfigProvider>
          </DrawerTrigger>
        </ProFormField>
        {/* <ProFormList name={"sql"} label="语句" >
      <ProFormGroup>
        <ProFormField width="md" name="sql" label="SQL" />
        <ProFormField width="md" name="params" label="参数" />
      </ProFormGroup>
    </ProFormList> */}
        {/* <ProFormTextArea name="body" label="返回结果" /> */}
        <ProFormField label="返回结果">
          <DrawerTrigger title="返回结果" trigger={<Button size="small"  icon={<EditOutlined/>}>设置</Button>}>
            <Alert
              showIcon
              type="info"
              style={{ marginBottom: 10 }}
              message={
                <div>
                  $.body 请求对象 $.headers 请求头 $.query 查询对象 $.sql
                  数据库查询对象
                </div>
              }
            />
            <ProFormItemRender name="resBody">
              {({ value, onChange }) => {
                return <JsonEditor onChange={onChange} schema={value} />;
              }}
            </ProFormItemRender>
          </DrawerTrigger>
        </ProFormField>
      </ConfigProvider>
    </ModalForm>
  );
};
export default SaveApi;
